%mp{
    margin: 0; padding: 0;
}
html{
    height: 100%;
    body{
        height: 100%;
        background-color: #ddd;
        font-family: "微软雅黑";
        @extend %mp;
        span,nav {@extend %mp;}
        p,h1,h2,h3,h4,h5,h6{font-weight: 100;@extend %mp; }
        input,a{outline: none; @extend %mp;}
        form,table,fieldset,legend{ @extend %mp;}
        a{text-decoration: none; color: #333;}
        a:hover{text-decoration: none;}
        ul,ol{
            li{
                list-style: none;
            }
            @extend %mp;
        }
        dl{
            @extend %mp;
            dt,dd{
                @extend %mp;
            }
        }
        img{display: block;border: 0; @extend %mp;}
        fieldset{border: 0;}
    }
}

%img1{
    width: 180px;
    height: 140px;
    margin: auto;
}
%h22{
    font-size: 16px;
    margin: 5px 0;
    font-weight: 500;
    text-align: center;
}
%p{
    font-size: 12px;
    text-align: center;
}
%price{
    display: block;
    color: red;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
}
%tu{
    width: 16%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    h2{
        @extend %h22;
    }
    p{
        @extend %p;
    }
    span{
        @extend %price;
    }
    img{
        @extend %img1;
    }
}

%span{
    float: left;
    margin:0px 8px;
    font-size: 12px;
    line-height: 40px;
    opacity: .7;
}
#header-wrap{
    background-color: #333;
}
#header{
    width: 1180px;
    height: 40px;
    margin: auto;
    background-color: #333;
    color:#ccc;
    line-height: 40px;
    font-size: 10px;
    a{
        color:#ccc;
    }
    #left{
        li{
            float: left;
        }
        span{
           @extend %span;  
        }
        float: left;
    }
    #right{
        float: right;
        li{
            float: left;
            #login,#res{
                float: right;
                margin: 0px 10px;
            }
        }
        span{
           @extend %span;  
        }
        button{
            float: right;
            width: 124px;
            height: 40px;
            border: none;
            outline: none;
            background-color: #333;
            opacity: .9;
            color: #ccc;
            line-height: 40px;
            font-size: 10px;
            text-align: center;
        }
    }
    a:hover{
        color:#fff;
    }
}
//nav
#nav-wrap{
    background-color: #fff;
    position: relative;
}
#nav{
    width: 1180px;
    height: 80px;
    background-color: #fff;
    margin: auto;
    display: flex;
    h1{
        height: 80px;
        line-height: 80px;
        width: 240px;
        font-size: 30px;
        span{
            float: left;
        }
        #logo{
            display: block;
            float: left;
            width: 50px;
            height: 50px;
            line-height: 80px;
            margin-top: 15px;
            background: url(../img/1.GIF) no-repeat left center/contain;
        }
    }
    ul{
        width: 700px;
        line-height: 80px;
        font-size: 18px;
        display: flex;
        li{
            margin-right: 50px;
            a{
                color:#333;
            }
            a:hover{
                color: red;
            }
        }
    }
    div{
        display: none;
        width: 100%;
        height: 280px;
        position: absolute;
        background-color:#fff;
        left:0;
        top:80px;
        z-index: 99;
        width: 100%;
        ul{
            width: 1180px;
            display: flex;
            justify-content: space-between;
            margin: auto;
            li{
                margin-right: 0;
                @extend %tu;
            }
        }
    }
}


//footer
#footer-wrap{
    background-color: #fff;
}
#footer{
    width: 1180px;
    height: 280px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    margin: auto;
    #fleft{
        width: 580px;
        float: left;
        padding-top: 40px;
        color: #262626;
        text-align: center;
        p{
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 45px;
        }
        ul{
            width: 100%;
            display: flex;
            justify-content: space-around;
            li{
                display: flex;
                flex-direction: column;
                .glyphicon{
                    font-size: 64px;
                    margin-bottom: 20px;
                }
                font-size: 16px;
            }
        }
    }
    #fmain{
        width: 362px;
        height: 200px;
        float: left;
        padding: 0 42px;
        margin-top: 43px;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        font-size: 18px;
        color: #262626;
        font-size: 18px;
        p{
            font-weight: 500;
            margin-bottom: 25px;
        }
        ul{
            width: 100%;
            display: flex;
            justify-content: space-around;
            li{
                display: flex;
                flex-direction: column;
                font-size: 18px;
                font-weight: 500;
                text-align: center;
                #w{
                    display: block;
                    height: 85px;
                    width: 85px;
                    background: url(https://mall02.sogoucdn.com/image/2019/03/25/20190325140401_4613.jpg) no-repeat left center/contain;
                    margin-bottom: 20px;
                }
                #x{
                    display: block;
                    height: 85px;
                    width: 85px;
                    background: url(https://mall02.sogoucdn.com/image/2019/03/25/20190325140414_4614.jpg) no-repeat left center/contain;
                    margin-bottom: 20px;
                }
                font-size: 16px;
            }
        }
    }
    #fright{
        width: 235px;
        float: left;
        padding-top: 40px;
        span{
            display: block;
            width: 175px;
            height: 200px;
            margin:  auto;
            background: url(../img/4.GIF) no-repeat left center/contain;
        }
    }
}


//bottom
#bottom-wrap{
    background-color: #fff;
}
#bottom{
    width: 1180px;
    margin: auto;
    text-align: center;
    padding-bottom: 40px;
    .links{
        padding-top: 53px;
        line-height: 30px;
        color: #8c8c8c;
        font-size: 12px;
        a{
            color: #8c8c8c;
            margin: 0 10px;
        }
    }
    .copyright{
        font-size: 12px;
        color: #8c8c8c;
        line-height: 30px;
        a{
            color: #8c8c8c;
        }
    }
}